<template>

    <div class="login-container">

      <el-card class="login-card">

        <h1 class="login-title">XSAP系统登录</h1>

        <div class="login-form">

          <el-form :model="loginForm" @submit.prevent="handleLogin">

            <el-row>
                <el-col :span="24">
                    <el-form-item label="用户名" label-width="60px">
                        <el-input v-model="loginForm.username" autocomplete="off" prefix-icon="user" maxlength="10" show-word-limit></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="密 码" label-width="60px">
                        <el-input type="password" v-model="loginForm.password" autocomplete="off" prefix-icon="lock" show-password></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="16">
                    <el-form-item label="验证码" label-width="60px">
                        <el-input v-model="loginForm.captcha" autocomplete="off" prefix-icon="check"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <!-- 绑定点击事件来更新验证码图片 -->
                    <img :src="captchaUrl" @click="updateCaptcha" class="captcha-image" alt="验证码">
                </el-col>
            </el-row>
        
            <el-form-item>
                <el-button type="primary" @click="handleLogin">登录</el-button>
            </el-form-item>
           
          </el-form>
          <RouterView />
        </div>

        <!-- 无帐号，点此注册 -->
        <el-row style="text-align: right;">
          <el-col>
            <el-text class="w-150px mb-2">
              若无帐号，点此>> <RouterLink to="/register" style="font-size: 1.2em;">注册</RouterLink>
            </el-text>
          </el-col>
        </el-row>
        
      </el-card>
    </div>

</template>
  
<script setup>

  import { ref } from 'vue';
  import { RouterLink } from 'vue-router'
  import {useRouter} from 'vue-router'

  // 验证码图片URL
  const captchaUrl = ref('/api/captcha');

  // 更新验证码的函数
  function updateCaptcha() {
    // 假设您的后端提供了一个接口来获取新的验证码图片
    // 这里使用一个简单的时间戳来模拟动态更新的URL
    captchaUrl.value = `/api/captcha?t=${new Date().getTime()}`;
  }

  // 定时更新验证码
  setInterval(updateCaptcha, 300000); // 每5分钟更新一次验证码
  
  const loginForm = ref({
    username: '',
    password: '',
    captcha: ''
  });
  
  const router  = useRouter()
  function handleLogin() {
    console.log('登录信息:', loginForm.value);
    //todo 这里可以添加登录逻辑

    //跳转到home页面
    router.push("/home/dashboard")

  }
</script>
  
<style scoped>
  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url('@/assets/loginbg-1.png'); /* 假设背景图片在assets目录下 */
    background-size: cover;
    background-position: center;
  }
  
  .login-card {
    width: 420px;
    padding: 20px;
    background-color: #fafafa;
  }
  .login-title {
    text-align: center;
    margin-bottom: 20px;
    color: #409eff;
  }
  .login-form {
    width: 100%;
  }

  .captcha-image {
    cursor: pointer; /* 当鼠标悬停时显示为可点击状态 */
    margin-left: 10px; /* 与输入框保持一定间距 */
    height: 36px; /* 控制图片高度，根据实际情况调整 */
    vertical-align: middle; /* 垂直居中对齐 */
}
</style>